<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
    <div style="background-color: #42b983">{{ count || 1 }}</div>
    <div style="background-color: #42b983">{{ doubleCount || 0 }}</div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';

export default {
  name: 'index',
  data() {
    return {};
  },
  computed: {
    // 方法二
    // ...mapState({
    //   list: state => state.moduleB.list,
    //   count: state => state.moduleB.count,
    //   doubleCount: 'moduleB/doubleCount'
    // })
    // 方法三
    ...mapState('moduleB', {
      list: state => state.list,
      count: state => state.count
    }),
    // 方法一
    // list() {
    //   return this.$store.state.moduleB.list;
    // }
    ...mapGetters({
      doubleCount: 'moduleB/doubleCount' // 把 `this.doubleCount` 映射为 `this.$store.getters.moduleB.doubleCount`
    })
  },
  methods: {
    /** 方法三 */
    ...mapActions('moduleB', [
      'getList' // -> this.getList()
    ]),
    /** 方法二 */
    // ...mapActions([
    //   'moduleB/getList' // -> this['moduleB/getList']()
    // ])
    /** 方法一 */
    // getList() {
    //   this.$store.dispatch('moduleB/getList').then(res => {
    //     console.log('res===', res);
    //   });
    // }
    // ...mapMutations('moduleB', ['modifyCount'])
    ...mapMutations(['moduleB/modifyCount'])
    // modifyCount(val) {
    //   this.$store.commit('moduleB/modifyCount', val);
    // }
  },
  mounted() {
    console.log(this.$store);
    console.log(this.$store.state.moduleB.list);
    // 方法一
    // this.getList();
    // 方法二
    // this['moduleB/getList']();
    // 方法三
    this.getList();
    console.log(this.$store.state.moduleB.list);

    // this.modifyCount(3);
    this['moduleB/modifyCount'](4);
  }
};
</script>

<style scoped></style>
